// 设计系统核心变量
$spacing-unit: 8px !default;
$border-radius-base: 12px !default;
$transition-duration: 0.3s !default;

// 主色系
$primary-colors: (
  base: #4A90E2,
  light: #6EB0FF,
  dark: #2C6CB0
);

// 渐变配色
$gradient-colors: (
  primary-start: #667EEA,
  primary-end: #764BA2,
  secondary-start: #FEE140,
  secondary-end: #FA709A
);

// 中性色
$neutral-colors: (
  100: #FFFFFF,
  200: #F5F7FA,
  300: #E4E7ED,
  400: #C0C4CC,
  500: #909399,
  600: #606266,
  700: #303133
);

// 过渡曲线
$easing-functions: (
  smooth: cubic-bezier(0.4, 0, 0.2, 1),
  bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55)
);

// 导出CSS变量
:root {
  /* 浅色模式默认值 */
  --background-color: #{map-get($neutral-colors, 200)};
  --text-color: #{map-get($neutral-colors, 700)};
  // 间距系统
  --spacing-xs: #{$spacing-unit};
  --spacing-sm: #{$spacing-unit * 2};
  --spacing-md: #{$spacing-unit * 3};
  --spacing-lg: #{$spacing-unit * 4};
  
  // 圆角系统
  --border-radius-sm: #{$border-radius-base * 0.5};
  --border-radius-md: #{$border-radius-base};
  --border-radius-lg: #{$border-radius-base * 2};
  
  // 主色
  --primary-color: #{map-get($primary-colors, base)};
  --primary-gradient-start: #{map-get($gradient-colors, primary-start)};
  --primary-gradient-end: #{map-get($gradient-colors, primary-end)};
  
  // 中性色
  @each $key, $value in $neutral-colors {
    --neutral-#{$key}: #{$value};
  }
  
  // 过渡参数
  --transition-duration: #{$transition-duration};
  --easing-smooth: #{map-get($easing-functions, smooth)};
}

// 深色模式基础变量
@import './dark-theme';

[data-theme="dark"] {
  @include dark-mode-variables;
  transition: all var(--transition-duration) var(--easing-smooth);
}